<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="css/angular-material.min.css">
</head>
<body ng-app="inputBasicDemo" ng-cloak>
  <!--
    Your HTML content here
  -->  
  
  <!-- Angular Material requires Angular.js Libraries -->
  <script src="js/angular-1.4.8.min.js"></script>
  <script src="js/angular-animate.min.js"></script>
  <script src="js/angular-aria.min.js"></script>
  <script src="js/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="js/angular-material.min.js"></script>
  
  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    //angular.module('BlankApp', ['ngMaterial']);

angular
  .module('inputBasicDemo', ['ngMaterial', 'ngMessages'])
  .controller('DemoCtrl', function($scope) {
    $scope.user = {
      title: 'Developer',
      email: 'ipsum@lorem.com',
      firstName: '',
      lastName: '',
      company: 'Google',
      address: '1600 Amphitheatre Pkwy',
      city: 'Mountain View',
      state: 'CA',
      biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
      postalCode: '94043'
    };
    
    $scope.states = ('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS ' +
    'MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI ' +
    'WY').split(' ').map(function(state) {
        return {abbrev: state};
      })
  })
  .config(function($mdThemingProvider) {
    // Configure a dark theme with primary foreground yellow
    $mdThemingProvider.theme('docs-dark', 'default')
      .primaryPalette('yellow')
      .dark();
  });



  </script>
  

<div ng-controller="DemoCtrl" layout="column" ng-cloak class="md-inline-form">
  <md-content md-theme="docs-dark" layout-gt-sm="row" layout-padding>
    <div>
      <md-input-container>
        <label>Title</label>
        <input ng-model="user.title">
      </md-input-container>
      <md-input-container>
        <label>Email</label>
        <input ng-model="user.email" type="email">
      </md-input-container>
    </div>
  </md-content>
  <md-content layout-padding>
    <div>
      <form name="userForm">
        <div layout-gt-xs="row">
          <md-input-container class="md-block" flex-gt-xs>
            <label>Company (Disabled)</label>
            <input ng-model="user.company" disabled>
          </md-input-container>
          <md-datepicker ng-model="user.submissionDate" md-placeholder="Enter date">
          </md-datepicker>
        </div>
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>First name</label>
            <input ng-model="user.firstName">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>Last Name</label>
            <input ng-model="theMax">
          </md-input-container>
        </div>
        <md-input-container class="md-block">
          <label>Address</label>
          <input ng-model="user.address">
        </md-input-container>
        <md-input-container md-no-float class="md-block">
          <input ng-model="user.address2" placeholder="Address 2">
        </md-input-container>
        <div layout-gt-sm="row">
          <md-input-container class="md-block" flex-gt-sm>
            <label>City</label>
            <input ng-model="user.city">
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>State</label>
            <md-select ng-model="user.state">
              <md-option ng-repeat="state in states" value="{{state.abbrev}}">
                {{state.abbrev}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="md-block" flex-gt-sm>
            <label>Postal Code</label>
            <input name="postalCode" ng-model="user.postalCode" placeholder="12345"
                   required ng-pattern="/^[0-9]{5}$/" md-maxlength="5">
            <div ng-messages="userForm.postalCode.$error" role="alert" multiple>
              <div ng-message="required" class="my-message">You must supply a postal code.</div>
              <div ng-message="pattern" class="my-message">That doesn't look like a valid postal
                code.
              </div>
              <div ng-message="md-maxlength" class="my-message">
                Don't use the long version silly...we don't need to be that specific...
              </div>
            </div>
          </md-input-container>
        </div>
        <md-input-container class="md-block">
          <label>Biography</label>
          <textarea ng-model="user.biography" columns="1" md-maxlength="150" rows="5"></textarea>
        </md-input-container>
      </form>
    </div>
  </md-content>
</div>


</body>
</html>
<style type="text/css" >
  body{
    font-family: 'Roboto','Microsoft YaHei';
  }
</style>